<template>
  <el-form ref="deptForm" :model="form" :rules="rules"  label-width="120px">
    <el-form-item label="部门名称" prop="name">
      <el-input v-model="form.name" style="width:80%" placeholder="1-50个字符" />
    </el-form-item>
    <el-form-item label="部门编码" prop="code">
      <el-input v-model="form.code" style="width:80%" placeholder="1-50个字符" />
    </el-form-item>
    <el-form-item label="部门负责人" prop="manager">
      <el-select v-model="form.manager" style="width:80%" placeholder="请选择">
        <el-option :value="item.username" :label="item.username" v-for="item in employees" :key="item.id" />
      </el-select>
    </el-form-item>
    <el-form-item label="部门介绍" prop="introduce">
      <el-input v-model="form.introduce" style="width:80%" placeholder="1-300个字符" type="textarea" :rows="3" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" size="small" @click="hSubmit">确定</el-button>
      <el-button size="small" @click="hCancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import  { getEmployeeSimple } from '@/api/employees'
import { addDepartments, getDepartDetail, updateDepartments } from '@/api/department'
export default {
  data() {
    const validCode = (rule, value, callback) =>{
      console.log(value, this.originList);
      //1. 已经存在的部门编号
      let exisCodeList = this.originList.map(item => item.code)
      // (1)如果是 编辑状态, 把 当前编辑的部门编号排除在外
      if(this.isEdit) {
        const curDep = this.originList.find(item => item.id === this.pid)
        const curCode = curDep.code
      // (2)排除当前正在编辑的部门在外
      exisCodeList = exisCodeList.filter(item => item !== curCode)
      }
      // 2.在已经存在的部门做判断
      if(exisCodeList.includes(value)) {
        callback(new Error(value + ':编码被占用啦'))
      } else {
        callback()
      }
    }
    const validName = (rule, value, callback) =>{
      console.log(value, this.originList);
      //1. 已经存在的部门编号
      let exisNameList = this.originList.filter(item => item.pid === this.pid).map(item => item.name)
      if(this.isEdit) {
        //  被占用的部门名字 = 当前被编辑的部门的同级 - 当前被编辑的部门
        // (1) 根据当前的部门的id, 找到pid
        const obj = this.originList.find(item => item.id === this.pid)
        const pid = obj.pid
        // 当前被编辑的部门的同级部门 - 当前被编辑的部门
        exisNameList = this.originList.filter(item => item.pid === pid && item.id !== this.pid).map(item => item.name)
        console.log('exisNameList', exisNameList)
      }
      // 2.在已经存在的部门做判断
      if(exisNameList.includes(value)) {
        callback(new Error('名字' + value + ':已经被占用啦'))
      } else {
        callback()
      }
    }
    return {
      rules: {
        name: [
        {required: true, message: '部门名称不能为空', trigger: 'blur'},
        {min: 1, max: 50, message: '部门名称要求1-50个字符', trigger: 'blur'},
        {validator: validName, trigger: 'blur'}
      ],
      code: [
        {required: true, message: '部门编码不能为空', trigger: 'blur'},
        {min: 1, max: 50, message: '部门编码要求1-50个字符', trigger: 'blur'},
        {validator: validCode, trigger: 'blur'}
      ],
      manager: [
        {required: true, message: '部门负责人不能为空', trigger: 'blur'},
      ],
      introduce: [
        {required: true, message: '部门介绍不能为空', trigger: 'blur'},
        {min: 1, max: 300, message: '部门介绍要求1-300个字符', trigger: 'blur'}
      ]
      },
      employees: [],  // 所有员工的信息
      form: {
        name: '', // 部门名称
        code: '', // 部门编码
        manager: '', // 部门管理者
        introduce: '' // 部门介绍
      }
    }
  },
  created() {
    this.loadEmployee()
    this.loadDetail()
  },
  props: {
    pid: {
      required: true,
      type: String
    },
    isEdit: {
      type: Boolean,
      required: true
    },
    originList: {
      type: Array,
      required: true
    }
  },
  methods: {
    // 用户点击了取消
    hCancel() {
    // 通知父组件去关闭弹层
    this.$emit('close')
    },
    // 获取当前部门的详情
    async loadDetail() {
      if (this.isEdit) {
        const res = await getDepartDetail(this.pid)
        console.log('现在是编辑,要去获取详情', res)
        this.form = res.data
      }
    },
    // 做添加
    async doAdd() {
      const d = {...this.form, pid: this.pid}
       // 2. 调用接口
      const rs = await addDepartments(d)
      console.log(rs)
      // 3. 通知父组件：关闭弹层，再次更新数据
      this.$emit('success')
    },
    // 做修改
    async doEdit() {
      await updateDepartments(this.form)   
      // 3. 通知父组件：关闭弹层，再次更新数据
      this.$emit('success')
    },
    hSubmit() {
      // 表单校验
      this.$refs.form.validade(valid => {
        if(valid) {
         // 做添加
         this.isEdit ? this.doEdit() : this.doAdd() 
        }
      })
      
    },
    async loadEmployee() {
     const res = await getEmployeeSimple() 
     console.log('员工信息', res)
     this.employees = res.data
    }
  }
}
</script>

<style>

</style>